<template>
  <div>
    <div class="demo-inner-divider">icon展开输入式搜索</div>
    <span class="demo-description">
      默认样式为icon展示，点击icon展开进行操作。（适用于顶部导航栏）
    </span>
    <div class="search-wrapper">
      <e-search
        is-icon
        clearable
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
    </div>

    <div class="demo-inner-divider">回车键搜索</div>
    <span class="demo-description">
      回车键会触发事件on-submit事件，回车键搜索样式下搜索图标在左侧，is-enter设置为true则启用该样式。
    </span>
    <div class="search-wrapper">
      <e-search
        v-model="query"
        is-enter
        clearable
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
        @on-clear="handleClear"
        @on-change="handleChange"
      />
    </div>

    <div class="demo-inner-divider">按钮搜索</div>
    <span class="demo-description"> 点击右侧搜索图标触发on-submit事件。</span>
    <div class="search-wrapper">
      <e-search
        class="button-search-component"
        clearable
        v-model="query"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
        @on-clear="handleClear"
      />
    </div>

    <div class="demo-inner-divider">搜索框尺寸</div>
    <span class="demo-description">小型：</span>
    <div class="search-wrapper">
      <e-search
        is-enter
        clearable
        size="small"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        class="button-search-component"
        clearable
        size="small"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
    </div>
    <span class="demo-description">中型：</span>
    <div class="search-wrapper">
      <e-search
        is-enter
        clearable
        size="middle"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        class="button-search-component"
        clearable
        size="middle"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
    </div>
    <span class="demo-description">大型：</span>
    <div class="search-wrapper">
      <e-search
        is-enter
        clearable
        size="large"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        class="button-search-component"
        clearable
        size="large"
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
    </div>
    <span class="demo-description">默认：</span>
    <div class="search-wrapper">
      <e-search
        is-enter
        clearable
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        class="button-search-component"
        clearable
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
    </div>
    <span class="demo-description">不可编辑：</span>
    <div class="search-wrapper">
      <e-search
        is-enter
        disabled
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        class="button-search-component"
        disabled
        placeholder="按名称搜索"
        style="width: 200px"
        @on-submit="handleSubmit"
      />
      <e-search
        disabled
        clearable
        placeholder="请输入"
        style="width: 300px"
        :filter-items="cityList"
        :filter-value="filterValue"
        @on-submit="handleSubmit"
        @on-select="handleSelect"
      />
    </div>

    <div class="demo-inner-divider">筛选搜索</div>
    <span class="demo-description">
      带前置搜索条件的搜索框，传入filter-items对象启用筛选搜索功能，此功能必须是在按钮搜索前提下才有效。
    </span>
    <div class="search-wrapper">
      <e-search
        v-model="query"
        clearable
        placeholder="请输入"
        style="width: 300px"
        :filter-items="cityList"
        :filter-value="filterValue"
        @on-submit="handleSubmit"
        @on-select="handleSelect"
        @on-clear="handleClear"
        @on-change="handleChange"
      />
    </div>

    <div class="demo-inner-divider">前置标签</div>
    <span class="demo-description"> 用于配置一些固定组合。</span>
    <div class="search-wrapper">
      <e-search
        clearable
        placeholder="请输入"
        prepend-label="http://"
        style="width: 300px"
        @on-submit="handleSubmit"
      >
      </e-search>
    </div>
    <search-md class="markdown-body"></search-md>
  </div>
</template>

<script>
import searchMd from '../../docs/search.md'

export default {
  name: 'DemoSearch',
  components: {
    searchMd,
  },
  data() {
    return {
      trueValue: true,
      falseValue: false,
      loading: true,
      filterValue: '1',
      query: '移动云',
      cityList: [
        {
          value: '1',
          label: '选项一',
        },
        {
          value: '2',
          label: '选项二',
        },
        {
          value: '3',
          label: '不可选项',
          disabled: true,
        },
      ],
    }
  },
  methods: {
    handleSubmit(value, filter) {
      console.warn(`handleSubmit--- value:${value}, filter:${filter}`)
    },
    handleSelect(value) {
      console.warn(`handleSelect--- value:${value}`)
    },
    handleClear() {
      this.$Message.info('清空搜索框文本，哇啦里拉隆')
    },
    handleChange(value, filter) {
      console.log(`搜索框文本：${value}，下拉框筛选：${filter}`)
    },
  },
}
</script>

<style lang="less" scoped>
.demo-description {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  margin-bottom: 10px;
}
.search-wrapper {
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
  .button-search-component:not(:first-child) {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.markdown-body {
  margin-top: 20px;
}
</style>
